<script setup lang="ts">
import { router } from "#/router";

defineOptions({ name: 'NewsInformation' });
const newsItems = [
  {
    imageUrl:
      'https://ai-public.mastergo.com/ai/img_res/ab761858e108c197fffbae92bc15e04a.jpg',
    title: '2024年毕业典礼隆重举行',
    description: '近日，我校举行2024届毕业生毕业典礼，5000余名毕业生参加典礼。',
    date: '2024-06-20',
  },
  {
    imageUrl:
      'https://ai-public.mastergo.com/ai/img_res/021b09a35856cb0e20e439b6d162df43.jpg',
    title: '重大科研突破',
    description:
      '我校科研团队在量子计算领域取得重大突破，相关成果发表于《自然》杂志。',
    date: '2024-06-18',
  },
  {
    imageUrl:
      'https://ai-public.mastergo.com/ai/img_res/a54b1f6cf19ee26e091ee0da3c43046b.jpg',
    title: '国际合作新进展',
    description: '我校与多所世界顶尖高校签署合作协议，深化教育科研合作。',
    date: '2024-06-15',
  },
];
function openread(){
  router.replace(
    {
      path: '/article',
    }
  )
}
</script>

<template>
  <!-- 新闻动态 -->
  <div class="news-section">
    <h2 class="section-title">新闻动态</h2>
    <div class="news-grid">
      <div v-for="(news, index) in newsItems" :key="index" class="news-card">
        <img :alt="news.title" :src="news.imageUrl" class="card-image" />
        <div class="card-content">
          <h3 class="card-title">{{ news.title }}</h3>
          <p class="card-description">{{ news.description }}</p>
          <div class="card-footer">
            <span class="news-date">{{ news.date }}</span>
            <el-button class="read-more"@click="openread" round type="primary">
              阅读更多
            </el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.news-section {
  @apply container mx-auto px-4 py-12;
}

.section-title {
  @apply mb-12 text-center text-3xl font-bold;
}

.news-grid {
  @apply grid grid-cols-3 gap-8;
}

.news-card {
  @apply overflow-hidden rounded-lg bg-white shadow-lg;
}

.card-image {
  @apply h-48 w-full object-cover;
}

.card-content {
  @apply p-6;
}

.card-title {
  @apply mb-2 text-xl font-bold;
}

.card-description {
  @apply mb-4 text-gray-600;
}

.card-footer {
  @apply flex items-center justify-between;
}

.news-date {
  @apply text-gray-500;
}

.read-more {
  @apply whitespace-nowrap rounded-full;
}

.read-more.el-button {
  padding: 8px 20px;
}
</style>
